Percentages, Fractions, and Decimals Grid

This interactive activity explores the representation of fractions, decimals, and percentages using either a square or a circle divided into equal parts.

When the activity launches, it displays a 100-square grid. You can click the random button to fill the grid with various colors. The number of colors used can be set with the color number control. To sort the colors automatically, click the arrange button, or click the trash button to reset the grid to all white.

To create your own visualization, simply select a color from the palette and then click and drag your mouse over the grid or the circle.

Display Options

The initial 100-square grid is ideal for explaining percentages, but this can be changed using the divisions selector. You can also switch from the square to a circular view by clicking the shape toggle control.

Showing and Hiding Values

On the right side of the screen are colored rectangles, each labeled with a ?. Click one of these to flip it over and display its decimal, percentage, or fraction value. To toggle an entire column at once, click one of the header buttons (Percentage, Decimal, or Fraction). Note that all displayed values update automatically as you change the grid or circle.

By default, the fractions shown are simplified. To see the unsimplified fraction, click the simplify fraction toggle control.

Related Activities

This activity is closely related to the interactive fraction wall. The interactive clock can also be used to display fractions using a circular face.